前面提到 Javascript 會阻擋 DOM 的建構，很神奇的是，CSS 會阻擋 Javascript 的執行。讓我們繼續以前例說明（不過增加了一段 jQuery）。
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="script.js" />
<p id="first">Hello this is a test page.</p>
CSS file 的內容：
p {
color: red;
}
JS file 的內容：
$(document).ready(function(){
$("#first").css("color","blue");
});
假設兩個 JS file 都抵達了，然而 CSS file 還沒到的話，瀏覽器一樣只能傻傻等待，為什麼呢?各位仔細看就會發現第二個 JS 修改了 id=first 的 p tag 的 CSS 屬性，原本 CSS 裡面設定它的文字顏色是紅色，後來被 JS 改成藍色。這一段 JS 很單純，但會操作 CSSOM ，瀏覽器還沒抓完 CSS 自然無法建構 CSSOM ， CSSOM 都還沒建好，JS 怎麼可能操作它呢?
看到這邊你有沒有發現 HTML 、 Javascript 以及 CSS 三者間微妙的關係了呢？
上面第二、第三點加起來，更加凸顯讓瀏覽器盡快取得 CSS file 的重要性。
你的 p 沒有文章說的 id=first 
<pre class="c" name="code">
<link href="layout.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="script.js" />
<p id="first">Hello this is a test page.</p>
你好，我有點問題想請教。
文中提到的「瀏覽器一樣只能傻傻等待」以及「CSSOM 都還沒建好，JS 怎麼可能操作它呢」，
實際上發生這樣的情況，如上述的 JavaScript 執行之後會發生什麼事？
<pre class="c" name="code">
$(document).ready(function(){
$("#first").css("color","blue");
});
我本來一直以為 CSSOM 跟 DOM 裡的 CSS 操作是分開的，理論上上述程式碼應該也只會動到 DOM 而已？改變 HTML 為
<pre class="c" name="code">
<p id="first" style="color: blue;">Hello this is a test page.</p>
iThome鐵人賽
看影片追技術